import { useMount, useRequest } from 'ahooks';
import { Button, message } from 'antd';

import { getResult } from '@/services/ant-design-pro/attribute';
import {
  editPrenter,
  editRefresh,
  findByPrenterList,
} from '@/services/ant-design-pro/sys_printer';
import { PlusOutlined, ReloadOutlined } from '@ant-design/icons';
import { BetaSchemaForm, ProFormInstance } from '@ant-design/pro-form';
import ProTable from '@ant-design/pro-table';
import React, { useRef, useState } from 'react';

const columnDialog = [
  {
    title: '基本信息',
    valueType: 'group',
    columns: [
      {
        title: 'id',
        dataIndex: 'id',
        key: 'id',
        initialValues: 0,
        hideInForm: true,
      },
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
        width: 'md',
      },
      {
        title: '打印机编号',
        dataIndex: 'serialId',
        width: 'md',
      },

      {
        title: '打印类型',
        dataIndex: 'type',
        valueType: 'select',
        width: 'md',
        initialValue: 0,
        fieldProps: {
          options: [
            {
              label: '否',
              value: 0,
            },
            {
              label: '是',
              value: 1,
            },
          ],
        },
      },
      {
        title: '试用开关',
        dataIndex: 'state',
        valueType: 'select',
        width: 'md',
        initialValue: 0,
        fieldProps: {
          options: [
            {
              label: '否',
              value: 0,
            },
            {
              label: '是',
              value: 1,
            },
          ],
        },
      },
    ],
  },
];
const column = [
  {
    title: '编号',
    dataIndex: 'index',
    key: 'index',
    valueType: 'indexBorder',
  },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    width: 'md',
  },
  {
    title: '打印机编号',
    dataIndex: 'serialId',
    width: 'md',
  },
  {
    title: '打印机状态',
    dataIndex: 'status',
    valueType: 'select',
    valueEnum: await getResult('printerStatus'),
    search: false,
  },
  {
    title: '打印类型',
    dataIndex: 'type',
    width: 'md',
  },

  {
    title: ' 试用开关',
    dataIndex: 'state',
    valueType: 'switch',
    width: 'md',
  },
];
const cloneTbale = () => {
  const formRef = useRef<ProFormInstance>();

  const [editDialg, setEditDialg] = React.useState(false);
  const [config, setConfig] = useState<API.SysConfig>();
  const {
    run: fetchByDataList,
    refresh,
    data: dataList,
    loading,
  } = useRequest(findByPrenterList, {
    debounceWait: 100,
    manual: true,
  });

  function editDialogInfo(
    row: React.SetStateAction<API.SysConfig | undefined>,
    index: any,
  ) {
    setConfig(row);
    formRef?.current?.setFieldsValue(row);
    setEditDialg(true);
  }

  // @ts-ignore
  function hideEditDialg() {
    setConfig({ id: 0 });
    formRef.current?.resetFields();
    setEditDialg(false);
  }

  function openEditDialg() {
    // @ts-ignore
    setConfig({ id: 0 });
    formRef.current?.resetFields();
    setEditDialg(true);
  }

  useMount(async () => {
    // @ts-ignore

    column[7] = {
      title: '操作',
      width: '164px',
      key: 'option',
      valueType: 'option',
      // @ts-ignore
      render: (_: any, row: any, index: any, action: any) => [
        <a
          key="link"
          onClick={(a) => {
            console.log(row);
            editDialogInfo(row, index);
          }}
        >
          编辑
        </a>,
      ],
    };
    fetchByDataList();
  });

  // @ts-ignore
  return (
    <div>
      <BetaSchemaForm<API.SysConfig>
        formRef={formRef}
        initialValues={config}
        onCancel={() => setEditDialg(false)}
        onVisibleChange={setEditDialg}
        title="参数设置"
        visible={editDialg}
        layoutType="ModalForm"
        columns={columnDialog}
        onFinish={async (values) => {
          values.id = config.id;
          console.log(values);
          return new Promise<Boolean>((resolve, reject) => {
            editPrenter(values)
              .then(() => {
                message.success('操作成功');
                setEditDialg(false);
                refresh();
                resolve(true);
              })
              .catch(() => {
                message.success('操作失败');
                reject(false);
              });
          });
        }}
      />
      <ProTable<API.Attribute>
        search={false}
        toolBarRender={() => [
          <Button
            onClick={() => {
              formRef.current?.resetFields();
              openEditDialg();
            }}
            key="button"
            icon={<PlusOutlined />}
            type="primary"
          >
            新建
          </Button>,
          <Button
            onClick={() => {
              editRefresh().then((res) => {
                refresh();
              });
            }}
            key="button"
            icon={<ReloadOutlined />}
            type="primary"
          >
            打印机更新
          </Button>,
        ]}
        onDataSourceChange={(d) => {
          console.log('onDataSourceChange', d);
        }}
        onLoad={(d) => {
          // 数据加载完操作
          console.log('onDataSourceChange', d);
        }}
        dataSource={dataList?.data}
        loading={loading}
        columns={column}
      ></ProTable>
    </div>
  );
};

export default cloneTbale;
